<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<jsp:include page="/WEB-INF/jsp/inc/include-easyUI.jsp"></jsp:include>
	<!-- 弹出框 -->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.css">
	<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.min.js"></script>
	
	<script src="${pageContext.request.contextPath}/static/plugins/js/outlook2.js" type="text/javascript"></script>
	
	<!-- 表单验证 -->
	<!--     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/css/bootstrap.css"/> -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/css/bootstrapValidator.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/js/bootstrapValidator.js"></script>
	
	<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>
	<!-- 时间选择器 -->
	<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/skin/jedate.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/jeDate/jedate/jedate.js"></script>
    
<style type="text/css">
.glyphicon {
	position: relative;
	top: -23px;
	padding-right: 10px;
	display: inline-block;
	font-family: 'Glyphicons Halflings';
	-webkit-font-smoothing: antialiased;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	float: right;
}

.help-block {
	display: block;
	margin-top: 10px;
	margin-bottom: 0px;
	color: #737373;
}
.widget-toolbar>a {
    font-size: 36px;
    margin: 0 1px;
    display: inline-block;
    padding: 0;
/*     line-height: 24px; */
}
.form-group {
    margin-bottom: 0px;
}
.form-group>label[class*="col-"] {
    padding-top: 2px;
    margin-bottom: 0px;
}

</style>
<script type="text/javascript">
	$(function() {
		$('#addConsumeInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				consumeItemId : {
					message : '消费类型不能为空',
					validators : {
						notEmpty : {
							message : '消费类型不能为空'
						},
					}
				},
				consumeMoney : {
					validators : {
						notEmpty : {
							message : '消费金额不能为空'
						},
					}
				},
			}
		});
// 		$('#reset_addConsumeInfo').click(function() {
// 			$('#addConsumeInfoForm').data('bootstrapValidator').resetForm(true);
// 		});
		$('#editConsumeInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				consumeItemId : {
					message : '消费类型不能为空',
					validators : {
						notEmpty : {
							message : '消费类型不能为空'
						},
					}
				},
				consumeMoney : {
					validators : {
						notEmpty : {
							message : '消费金额不能为空'
						},
					}
				},
			}
		});
// 		$('#reset_editConsumeInfo').click(function() {
// 			$('#editConsumeInfoForm').data('bootstrapValidator').resetForm(true);
// 		});
		$('#vss').click(function() {
			$('#addConsumeInfoForm').bootstrapValidator('validate');
		});
		$('#change-search-box').click();
	});
</script>
</head>
<body>

	<div class="main-content">
		<div class="breadcrumbs" id="breadcrumbs">
			<script type="text/javascript">
 				try { 
 					ace.settings.check('breadcrumbs', 'fixed') 
 				} catch (e) { 
 				} 
			</script> 
			<ul class="breadcrumb">
				<li class="active">固定消费管理</li>
			</ul>
		</div>
		<div class="page-content">
			
			<div id="content" region="center" title="固定消费信息" style="overflow: hidden">
			</div>
			<table id="userList" border="false" width="100%" height="450px">
			</table>
			
			<!-- 创建 -->
			<div class="modal fade" id="addConsumeModal" tabindex="-1" role="dialog" aria-labelledby="addConsumeModalLabel">
				<div class="modal-dialog" role="document" style="margin:150px 450px">
					<div class="modal-content">
						<form id="addConsumeInfoForm" class="form-horizontal" role="form" style="margin: 0px;">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_addConsumeInfo">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="addConsumeModalLabel">固定消费信息</h4>
							</div>
							<div class="modal-body">
								<input type="hidden" name="consumeType" value="FIXED_CONSUME"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeItemId"> 消费类型：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeItemId" id="add-consume-consumeItemId" placeholder="消费类型" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeMoney"> 消费金额：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeMoney" id="add-consume-consumeMoney" placeholder="消费金额" class="form-control" />
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<div class="col-lg-6 col-lg-offset-5">
									<button type="button" class="btn btn-default" id="reset_addConsumeInfo" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="submit_addConsumeInfo">确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- 编辑 -->
			<div class="modal fade" id="editConsumeModal" tabindex="-1" role="dialog" aria-labelledby="editConsumeModalLabel">
				<div class="modal-dialog" role="document" style="margin:150px 450px">
					<div class="modal-content">
						<form id="editConsumeInfoForm" class="form-horizontal" role="form" style="margin: 0px;">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close" id="close_editConsumeInfo">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title" id="editConsumeModalLabel">固定消费信息</h4>
							</div>
							<div class="modal-body">
								<input type="hidden" name="consumeType" value="FIXED_CONSUME"/>
								<input type="hidden" name="id" id="edit-consume-id"/>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-consume-consumeItemId"> 消费类型：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeItemId" id="edit-consume-consumeItemId" placeholder="消费类型" class="form-control" />
									</div>
								</div>
								<div class="space-4"></div>
								<div class="form-group">
									<label class="col-sm-3 control-label no-padding-right" for="edit-consume-consumeMoney"> 消费金额：</label>
									<div class="col-sm-8">
										<input type="text" name="consumeMoney" id="edit-consume-consumeMoney" placeholder="消费金额" class="form-control" />
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<div class="col-lg-6 col-lg-offset-5">
									<button type="button" class="btn btn-default" id="reset_editConsumeInfo" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary" id="submit_editConsumeInfo">确定</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<!-- PAGE CONTENT ENDS -->
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content -->
	</div><!-- /.main-content -->
<script type="text/javascript">
		var userGrid;
        $(function () {
            userGrid = $("#userList").datagrid({
                url: '${pageContext.request.contextPath}/admin/consumeCount/getList',
                rownumbers: true,
                fitColumns:true,
                idField: 'id',//'UserId',
                pageSize: 10,
                pagination: true,
                pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                onLoadError:function(data){
                	$.messager.alert("消费信息", "暂无消费数据信息", "error");
                
                },
                frozenColumns: [[{
                    title: 'id',
                    field: 'id',//'UserId',
                    width: 50,
                    checkbox: true
                    
                }]],
                columns: [[ {
                    field: 'consumeTypeName',
                    title: '消费类型',
                    width: 100,
                    sortable: true
                }, {
                    field: 'consumeMoney',
                    title: '消费金额',
                    width: 100,
                }, {
                    field: 'createUser',
                    title: '创建人',
                    width: 100
                }, {
                    field: 'createDate',
                    title: '创建时间',
                    width: 100
                }
                ]],

                toolbar: [
                {
                    text: '创建',
                    iconCls: 'icon-add',
                    handler: function () {
                     createUser();
                    }
                }, '-', {
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteUser();
                    }
                }, '-', {
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        editConsume();
                    }
                }, '-', {
                    text: '取消选中',
                    iconCls: 'icon-undo',
                    handler: function () {
                        userGrid.datagrid('unselectAll');
                    }
                }]
            });
        });
     
        function reloadDataGrid() {
            userGrid.datagrid('clearChecked');
            userGrid.datagrid('reload');
        }

		$('#addConsumeModal').on('hide.bs.modal', function () {
			$('#addConsumeInfoForm').data('bootstrapValidator').resetForm(true);
		});
		//创建消费
		function createUser() {
			//弹出创建消费
			$('#addConsumeModal').modal('show');
		}
		$('#submit_addConsumeInfo').click(function(){
			var f = $('#addConsumeInfoForm');
			f.data('bootstrapValidator').validate();
			var isValid = f.data('bootstrapValidator').isValid();
			if(!isValid){
				return false;
			}
			var toUrl='${pageContext.request.contextPath}/admin/consumeCount/create';
			var f = $('#addConsumeInfoForm');
				f.form('submit', {
				    url: toUrl,
				    onsubmit: function () {
				        var flag = $(this).form('validate');
				        if (flag) {
				            top.showProcess(true, '温馨提示', '正在提交数据...');
				        }
				        return flag;
				    },
				    success: function (data) {
				        var map = $.parseJSON(data);
				        if (map.success) {
				        	$('#addConsumeModal').modal('hide');
				            top.showMsg('提示', map.msg);
				            reloadDataGrid();
				        } else {
				        	top.alertMsg('错误', map.msg);
				        }
				    },
				    onLoadError: function () {
				        top.showProcess(false);
				        top.$.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
				    }
				});
		});
		//删除消费
		function deleteUser() {
			var ids = [];
			var rows = userGrid.datagrid('getSelections');
			if (rows.length > 0) {
				var names = [];
				if(rows.length > 3){
					names.push(rows[0].userName);
					names.push("...");
					names.push(rows[rows.length-1].userName);
				}else{
					for ( var i = 0; i < rows.length; i++) {
						names.push(rows[i].userName);
					}
				}
				swal({
					title : "你是否确定删除？",
					text : names.join(','),
					type : "warning",
					showCancelButton : true,
					confirmButtonColor : "#DD6B55",
					confirmButtonText : "删除",
					cancelButtonText : "取消",
					closeOnConfirm : false,
// 					closeOnCancel : false
				},
				function(isConfirm) {
					if (isConfirm) {
						for ( var i = 0; i < rows.length; i++) {
							ids.push(rows[i].id);
						}
						$.ajax({
							url : '${pageContext.request.contextPath}/admin/consumeCount/edit',
							data : {
								userIds : ids.join(',')
							},
							cache : false,
							dataType : "json",
							success : function(data) {
								if (data.success) {
									swal("删除成功","","success");
									reloadDataGrid();
								} else {
									swal("删除失败", data.obj,"error");
								}
							}
						});
					} 
				});
			} else {
				top.showMsg("提示", "请选择要删除的消费！");
			}
		}
		//编辑消费
		$('#editConsumeModal').on('hide.bs.modal', function () {
			$('#editConsumeInfoForm').data('bootstrapValidator').resetForm(true);
		});
		function editConsume() {
			var rows = userGrid.datagrid('getSelections');
			if (rows.length > 0) {
				if (rows.length == 1) {
					//弹出编辑框
					$('#edit-user-id').val(rows[0].id)
					$('#edit-user-name').val(rows[0].userName);
					$('#edit-user-mobile').val(rows[0].mobile);
					$('#edit-user-email').val(rows[0].email);
					$('#editConsumeModal').modal('show');
				} else {
					top.showMsg("提示", '只能选择一个消费进行编辑！');
				}
			} else {
				top.showMsg("提示", "请选择要编辑的消费！");
			}
		}
		
		$('#submit_editConsumeInfo').click(function(){
			var f = $('#editConsumeInfoForm');
			f.data('bootstrapValidator').validate();
			var isValid = f.data('bootstrapValidator').isValid();
			if(!isValid){
				return false;
			}
			var id = $('#edit-user-id').val()
			var userName = $('#edit-user-name').val();
			var passWord = $('#edit-user-passWord').val();
			var mobile = $('#edit-user-mobile').val();
			var email = $('#edit-user-email').val();
			var toUrl='${pageContext.request.contextPath}/admin/sys/user/editConsume';
			$.post(toUrl, 
					{
						id : id,
						userName : userName,
						passWord : passWord,
						mobile : mobile,
						email : email,
					},
					function(data){
						top.showProcess(false);
						if (data.success) {
							$('#editConsumeModal').modal('hide');
							top.showMsg('提示', data.msg);
							reloadDataGrid();
						} else {
							top.alertMsg('警告', data.msg);
						}
			});
			
		});
		function getSelectId() {
			var row = userGrid.datagrid('getSelected');

			if (!row) {
				$.messager.show({
					title : '提示',
					msg : '请选择数据！',
					showType : 'show'
				});
				return null;
			} else {
				return row.Id;
			}
		}
		
		function clearFun() {
			$('#frmSearchUser').form('clear');
		}
	</script>	
  </body>
</html>
